<template>
	<div class="main">
		<el-container>
			<el-aside class="main-aside" :width="isFold?'60px':'200px'">
				<main-menu :is-fold="isFold"/>
			</el-aside>
			<el-container>
				<el-header height="50px">
					<main-header @fold-change="handleFoldChange"/>
				</el-header>
				<el-main>
					<div class="main-content">
						<RouterView/>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup lang="ts">

import MainMenu from '@/components/main/mainMenu.vue'
import MainHeader from '@/components/main/mainHeader.vue'
import { ref } from 'vue'

// 处理 main-header 中折叠的变化。
const isFold = ref(false)

console.log()

function handleFoldChange(flag: boolean) {
	isFold.value = flag
}

</script>

<style scoped lang="less">
.main {
	//color: aqua;
	width: 100%;
	height: 100%;
	background-color: #f0f0f0;
	
	.el-container {
		height: 100%;
	}
	
	.main-aside {
		overflow-x: hidden;
		overflow-y: auto;
		line-height: 200px;
		text-align: left;
		cursor: pointer;
		scrollbar-width: none; /* firefox */
		-ms-overflow-style: none; /* IE 10+ */
		height: 100%;
		background-color: #021d30;
		
		transition: width 0.3s ease;
	}
	
	.el-header {
		background-color: white;
	}
	
	.el-main {
		background-color: #f0f0f0;
	}
	
	.main-content {
		//background-color: white;
		
	}
}
</style>